<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="css/shopcart.css">
  <link rel="stylesheet" href="css/base.css">
  <script src="libs/requirejs/require.min.js" data-main="js/cart"></script>
</head>

<body>
  <div class="shop_top">
    <div class="shop_top_border"></div>

    <div class="cart_main">
      <div class="main_top">购物车</div>
      <div class="cart_topnav">
        <div class="cart_nav_check">
        </div>
        <div class="cart_nav_all"><label><input type="checkbox" class="check_all" checked="checked" />全选</label></div>
        <div class="cart_nav_list">商品</div>
        <div class="cart_nav_price">金额</div>
        <div class="cart_nav_num">数量</div>
        <div class="cart_nav_count">小计</div>
        <div class="cart_nav_option">操作</div>
      </div>
      <ul class="prod_list">
        <li class="first_line"></li>
        <li class="last_line"></li>
      </ul>
      <div class="cart-body"></div>
      <div class="cart-footer">
        <span>合计：<em class="total">0.00</em></span>
        <button class="check_oper">反选</button>
        <button class="remove_checked">删除选中商品</button>
        <button class="clear_cart">清空购物车</button>
      </div>
    </div>
  </div>

  <!-- 购物车商品渲染模板 -->
  <script type="text/html" id="cart-template">
    {{each cart prod}}
    <div class="cart_topnav" style="clear: both;" data-id="{{prod.id}}">
      <div class="cart_nav_check">
        <input type="checkbox" {{prod.checked ? 'checked="checked"' : ''}} class="check_prod" />
      </div>
      <div class="cart_nav_list">
        <img src="{{prod.image}}" alt="" style="width: 64px; height: 64px;">
        <span>{{prod.title}}</span>
      </div>
      <div class="cart_nav_price">{{prod.price}}</div>
      <div class="cart_nav_num">
        <button class="minus">-</button>
        <input class="amount" type="text" value="{{prod.amount}}" size="2">
        <button class="plus">+</button>
      </div>
      <div class="cart_nav_count">{{prod.price * prod.amount}}</div>
      <div class="cart_nav_option"><button class="btn-remove">删除</button></div>
    </div>
    {{/each}}
  </script>
</body>

</html>